/**
 * 技术架构组件
 * 展示系统架构、工作流程等技术实现细节
 */

import { motion } from "framer-motion";

interface ArchitectureSectionProps {
    sectionRef: (el: HTMLElement | null) => void;
}

export default function ArchitectureSection({ sectionRef }: ArchitectureSectionProps) {
    return (
        <section
            ref={sectionRef}
            className="py-20 bg-white">
            <div className="max-w-7xl mx-auto px-6">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">技术架构</h2>
                </motion.div>
                
                {/* 系统架构图 */}
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 30
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}
                    className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                    <h3 className="text-2xl font-semibold text-gray-800 mb-8 text-center">系统架构</h3>
                    <div className="flex flex-col items-center">
                        <div className="w-full max-w-5xl">
                            <div className="flex flex-col md:flex-row justify-between items-center">
                                {/* 输入层 */}
                                <motion.div
                                    className="bg-blue-50 p-6 rounded-xl shadow-md w-full md:w-1/4 mb-8 md:mb-0 text-center"
                                    whileHover={{
                                        scale: 1.05
                                    }}
                                    transition={{
                                        duration: 0.3
                                    }}>
                                    <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i className="fa-solid fa-file-alt text-blue-600 text-xl"></i>
                                    </div>
                                    <h4 className="font-bold text-blue-800 mb-2">输入层</h4>
                                    <p className="text-sm text-blue-600">PDF/Word/图片</p>
                                    <div className="mt-4 text-xs text-gray-500">
                                        <p>多格式支持</p>
                                        <p>扫描件兼容</p>
                                    </div>
                                </motion.div>
                                
                                <div className="hidden md:block text-2xl text-gray-400 mx-4">
                                    <i className="fa-solid fa-arrow-right"></i>
                                </div>
                                <div className="md:hidden text-2xl text-gray-400 my-4">
                                    <i className="fa-solid fa-arrow-down"></i>
                                </div>
                                
                                {/* 处理层 */}
                                <motion.div
                                    className="bg-green-50 p-6 rounded-xl shadow-md w-full md:w-2/5 mb-8 md:mb-0 text-center"
                                    whileHover={{
                                        scale: 1.05
                                    }}
                                    transition={{
                                        duration: 0.3
                                    }}>
                                    <div className="flex justify-center mb-4">
                                        <div className="bg-green-100 w-14 h-14 rounded-full flex items-center justify-center mx-2">
                                            <i className="fa-solid fa-eye text-green-600 text-xl"></i>
                                        </div>
                                        <div className="bg-green-100 w-14 h-14 rounded-full flex items-center justify-center mx-2">
                                            <i className="fa-solid fa-brain text-green-600 text-xl"></i>
                                        </div>
                                        <div className="bg-green-100 w-14 h-14 rounded-full flex items-center justify-center mx-2">
                                            <i className="fa-solid fa-cogs text-green-600 text-xl"></i>
                                        </div>
                                    </div>
                                    <h4 className="font-bold text-green-800 mb-2">处理层</h4>
                                    <p className="text-sm text-green-600">OCR + NLP + 微调小模型</p>
                                    <div className="mt-4 text-xs text-gray-500">
                                        <p>智能文档处理 + 大模型微调</p>
                                        <p>高效低延迟解析引擎</p>
                                    </div>
                                </motion.div>
                                
                                <div className="hidden md:block text-2xl text-gray-400 mx-4">
                                    <i className="fa-solid fa-arrow-right"></i>
                                </div>
                                <div className="md:hidden text-2xl text-gray-400 my-4">
                                    <i className="fa-solid fa-arrow-down"></i>
                                </div>
                                
                                {/* 输出层 */}
                                <motion.div
                                    className="bg-purple-50 p-6 rounded-xl shadow-md w-full md:w-1/4 text-center"
                                    whileHover={{
                                        scale: 1.05
                                    }}
                                    transition={{
                                        duration: 0.3
                                    }}>
                                    <div className="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i className="fa-solid fa-database text-purple-600 text-xl"></i>
                                    </div>
                                    <h4 className="font-bold text-purple-800 mb-2">输出层</h4>
                                    <p className="text-sm text-purple-600">结构化数据</p>
                                    <div className="mt-4 text-xs text-gray-500">
                                        <p>标准化数据</p>
                                        <p>API集成</p>
                                    </div>
                                </motion.div>
                            </div>
                        </div>
                    </div>
                </motion.div>
                
                {/* 工作流程 */}
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 30
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6,
                        delay: 0.2
                    }}
                    viewport={{
                        once: true
                    }}
                    className="bg-white rounded-2xl shadow-xl p-8">
                    <h3 className="text-2xl font-semibold text-gray-800 mb-8 text-center">工作流程</h3>
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                        {/* 步骤1 */}
                        <div className="bg-gray-50 p-6 rounded-xl">
                            <div className="bg-blue-500 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">1</div>
                            <h4 className="font-semibold text-lg text-gray-800 mb-3">文本提取</h4>
                            <ul className="text-sm text-gray-600 space-y-2">
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-blue-500 mt-1 mr-2"></i>
                                    <span>OCR识别文本内容</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-blue-500 mt-1 mr-2"></i>
                                    <span>保留文档结构信息</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-blue-500 mt-1 mr-2"></i>
                                    <span>处理多语言文本</span>
                                </li>
                            </ul>
                        </div>
                        
                        {/* 步骤2 */}
                        <div className="bg-gray-50 p-6 rounded-xl">
                            <div className="bg-green-500 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">2</div>
                            <h4 className="font-semibold text-lg text-gray-800 mb-3">内容识别</h4>
                            <ul className="text-sm text-gray-600 space-y-2">
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>NLP实体识别</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>微调小模型处理</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>关键信息提取</span>
                                </li>
                            </ul>
                        </div>
                        
                        {/* 步骤3 */}
                        <div className="bg-gray-50 p-6 rounded-xl">
                            <div className="bg-purple-500 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">3</div>
                            <h4 className="font-semibold text-lg text-gray-800 mb-3">结构化转换</h4>
                            <ul className="text-sm text-gray-600 space-y-2">
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                    <span>信息分类整理</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                    <span>标准化数据格式</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                    <span>数据质量验证</span>
                                </li>
                            </ul>
                        </div>
                        
                        {/* 步骤4 */}
                        <div className="bg-gray-50 p-6 rounded-xl">
                            <div className="bg-amber-500 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">4</div>
                            <h4 className="font-semibold text-lg text-gray-800 mb-3">应用输出</h4>
                            <ul className="text-sm text-gray-600 space-y-2">
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-amber-500 mt-1 mr-2"></i>
                                    <span>API数据接口</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-amber-500 mt-1 mr-2"></i>
                                    <span>人岗匹配分析</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check text-amber-500 mt-1 mr-2"></i>
                                    <span>招聘系统集成</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </motion.div>
            </div>
        </section>
    );
}